import React, { useEffect, useMemo, useState } from 'react';
import { Menu } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { mobxState } from '@/data';
import { observer } from 'mobx-react-lite';
import getActiveMenu from '@/router/utils/getActiveMenu';
import { PieChartOutlined } from '@ant-design/icons';
import antdIcon from "@/assets/antdIcon/index.js"
import { filterHideMenu, getRouteInfo, filterVisibleMenu } from '@/router';


function getItem(activeMenu, routerPath, label, key, menuIcon, children, type) {
  return {
    activeMenu,
    key,
    icon: antdIcon({ style: { fontSize: '16px' } }).getIcon(menuIcon),
    children,
    label,
    type,
    routerPath,
  };
}




const MenuContent = ({

}) => {
  const [selectedKeys, setSelectedKeys] = useState('float-advert')
  const navigate = useNavigate();
  const routes = filterHideMenu(mobxState.routes);
  const location = useLocation();
  useEffect(() => {

    const { pathname } = location

    //获取激活key，如果没有activeMenu，则走它自己
    setSelectedKeys(getActiveMenu(pathname) || pathname)
    // setSelectedKeys("/system/dict")
  }, [location])




  // items从routes中来获取

  // 递归
  const getItemsList = (list = []) => {
    let array = [];
    for (var i = 0; i < list.length; i++) {
      const element = list[i]
      // console.log("遍历路由：", element)
      if (element.visible === '1') {
        array.push(

          getItem(element.activeMenu, element.routerPath, element.menuName, element.path, element.menuIcon,
            element.children && element.children.length > 0 ? getItemsList(element.children) : null,

          )
        )
      }

    }

    return array;

  }
  const items = useMemo(() => {
    return getItemsList(routes[0].children)
  }, [routes])

  // 获取当前要跳转的路径所属的路由全部信息

  // end
  // 路由点击事件
  const handleClick = (item) => {
    let { key = String, } = item
    const route = getRouteInfo(key, routes);

    //如果路由类型是链接（menuType==="4")则在新窗口中打开链接
    if (route.menuType === "4") {
      window.open(route.path);
    } else {
      navigate(route.path)

    }

  }



  //start
  /**
   * 这部分代码是用于确保菜单始终只展开一个大项；如果不要这个功能，注释掉Menu组件中的openKeys和onChange即可。
   */
  const [openKeys, setOpenKeys] = useState(['']);//存放当前打开的折叠项

  const getRootSubmenuKeys = (items) => {
    let list = [];
    items.forEach(element => {
      list.push(element.key)
    });
    return list
  }


  const rootSubmenuKeys = getRootSubmenuKeys(items);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };


  //end

  return (
    <div
    >

      <Menu
        selectedKeys={selectedKeys}
        mode="inline"
        theme="dark"
        items={items}
        onClick={handleClick}
        openKeys={openKeys}  //openKeys这行代码是用于确保菜单始终只展开一个大项；如果不要这个功能，注释即可。
        onOpenChange={onOpenChange}  //onOpenChange这行代码是用于确保菜单始终只展开一个大项；如果不要这个功能，注释掉即可。
      />
    </div>
  );
};
export default observer(MenuContent);